<template>
    <div class="section">
      <video ref="video" :src="videoSrc" muted></video>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted, onUnmounted } from 'vue';
  
  const videoSrc = './src/assets/videos/banner1.mp4';
  const video = ref(null);
  
  function handleScroll(event) {
    const videoElement = video.value;
    if (!videoElement) return;
  
    const rect = videoElement.getBoundingClientRect();
    const windowHeight = window.innerHeight;
  
    if (rect.top <= windowHeight / 2 && rect.bottom >= windowHeight / 2) {
      const progress = Math.max(0, Math.min(1, (windowHeight / 2 - rect.top) / rect.height));
      videoElement.currentTime = progress * videoElement.duration;
  
      if (event.deltaY > 0 && progress < 1) {
        videoElement.play();
      } else if (event.deltaY < 0 && progress > 0) {
        videoElement.playbackRate = -1; // 倒退播放
        videoElement.play();
      } else {
        videoElement.pause();
      }
    }
  }
  
  onMounted(() => {
    window.addEventListener('wheel', handleScroll);
  });
  
  onUnmounted(() => {
    window.removeEventListener('wheel', handleScroll);
  });
  </script>
  
  <style scoped>
  .section {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    scroll-snap-align: start;
    background-color: black;
  }
  video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  </style>